<template>
  <div>
    <h1 class="module-title">政策资讯</h1>
    <div class="marginT20">
      <Row>
        <i-col span="18" offset="3" style="margin-top:20px;margin-bottom:20px;">
          <Row>
            <i-col span="11" class="latest-policy">
              <h2 style="margin-bottom:10px;">
                最新政策
                <span class="title-line"></span>
              </h2>
              <div class="latest-policy-item min-height" v-for="(item,index) in policyInfo" :key="index" :class="index==0?'latest-policy-item-active':''">
                <div v-if="index==0" @click="goInfoDetail(item)" class="cursor-point">
                  <h4><Icon type="record"></Icon>{{item.title}}</h4>
                  <p>{{item.content}}</p>
                </div>
                <div v-else @click="goInfoDetail(item)" class="cursor-point">
                  <h4><Icon type="record"></Icon>· {{item.title}}</h4>
                  <p>{{item.content}}</p>
                </div>
              </div>
              <p class="get-more"><span class="cursor-point" @click="goInfoListPage">了解更多...</span></p>
            </i-col>

            <i-col span="11" offset="2" class="news">
              <h2 style="margin-bottom:10px;">
                新闻动态
                <span class="title-line"></span>
              </h2>
              <div class="news-item min-height" v-for="(item,index) in newsInfo" :key="index" :class="index==0 ? 'news-item-first' : ''">
                <div v-if="index==0" class="newFirstItem cursor-point" @click="goInfoDetail(item)">
                  <img :src="item.cover" alt width="110px" height="80px"/>
                  <div class="newFirstItemInfo">
                    <h4>{{item.title}}</h4>
                    <p>{{item.content}}</p>
                  </div>
                </div>
                <div v-else @click="goInfoDetail(item)" class="cursor-point">
                  <h4>· {{item.title}}</h4>
                  <p>{{item.content}}</p>
                </div>
              </div>
              <p class="get-more"><span class="cursor-point" @click="goInfoListPage">了解更多...</span></p>
            </i-col>
          </Row>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
import newsPic from '@/assets/images/bg-1.png'

export default {
    name: 'policyInformation',
    props:["policyInfo","newsInfo"],
    data() {
        return {
          newsPic,
        }
    },
    mounted(){
 
    },
    methods:{
      goInfoListPage(){
        this.$router.push("/infoList");
      },
      goInfoDetail(data){
        this.$router.push({
            path:'/infoDetails',
            query:{
                infoId:data.id
            }
        })
      }
    }
};
</script>
<style scoped>
.module-title{
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
}
.trading-dynamic{
  text-align: center;
}
.trading-dynamic .ivu-col{
  margin-top: 10px;
}
.latest-policy-item,.news-item{
  padding: 20px;
}
.get-more{
  text-align: right;
  color: #00A573;
  font-size: 12px;
}
.title-line{
  display: inline-block;
  width: 40px;
  height: 5px;
  background: #00A573;
  margin-left: 15px;
  position: relative;
  top: -4px;
}
.latest-policy-item-active{
  background: #F1F3F5;
  border-radius: 5px;
}
.latest-policy-item-active h4{
  font-size: 15px;
  margin-bottom: 10px;
}
.news-item-first{
  padding: 10px 0 0px 0;
  border:1px solid rgba(235,235,235,1);
  border-radius:4px;
}
.newFirstItem img, .newFirstItemInfo{
  display: inline-block;
}
.newFirstItemInfo{
  width: 70%;
  margin-left: 10px;
  position: relative;
  top: -10px;
}
.min-height{
  min-height: 70px;
}
</style>